<template>
  <div class="moments-list" v-if="moments.length > 0">
    <div class="moments-content">
      <div class="moments-row">
        <div class="moments-header">
          <i class="fas fa-comment-dots"></i>
          <span>最新说说:</span>
        </div>
        <transition name="fade" mode="out-in">
          <div class="moment-item" :key="currentIndex">
            <span class="moment-text" @click="goToMoments" v-html="moments[currentIndex].content" />
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import { getMoments } from '@/api/moments'

export default {
  name: 'MomentsList',
  data() {
    return {
      moments: [],
      currentIndex: 0,
      timer: null
    }
  },
  created() {
    this.getMomentsList()
  },
  mounted() {
    this.startRotation()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    getMomentsList() {
      getMoments({ pageSize: 5, pageNum: 1 }).then(res => {
        if (res.data && res.data.records) {
          this.moments = res.data.records
          this.startRotation()
        }
      })
    },
    goToMoments() {
      this.$router.push('/moments')
    },
    startRotation() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.moments.length
      }, 4000) // 每4秒切换一次
    }
  }
}
</script>

<style lang="scss" scoped>
.moments-list {
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.05) 0%, 
    rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: $border-radius-lg;
  padding: $spacing-lg $spacing-xl;
  margin-bottom: $spacing-xl;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: $border-radius-lg 0 0 $border-radius-lg;
  }
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.2);
  }
  
  :root[data-theme='dark'] & {
    background: linear-gradient(135deg, 
      rgba(99, 102, 241, 0.08) 0%, 
      rgba(139, 92, 246, 0.08) 100%);
    border-color: rgba(99, 102, 241, 0.15);
  }
}

.moments-content {
  .moments-row {
    display: flex;
    align-items: center;
    gap: $spacing-md;
  }
}

.moments-header {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  font-size: 15px;
  
  i {
    color: #667eea;
    font-size: 1.3em;
    animation: swing 2s ease-in-out infinite;
  }
}

@keyframes swing {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}

.moment-item {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  max-height: 24px;
  overflow: hidden;
  
  .moment-text {
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.6;
    transition: all 0.3s ease;
    
    &:hover {
      color: #667eea;
      transform: translateX(4px);
    }
  }
}

// 添加过渡动画样式
.fade-enter-active,
.fade-leave-active {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  transform: translateX(0);
}
</style> 